<template>
  <div class="comment" :key="item.id">
    <slot></slot>
    <div class="cmt-left">
      <img :src="item.user.avatarUrl" />
    </div>
    <div class="cmt-middle">
      <div class="cmt-user">
        <div class="nikename">
          <span>{{ item.user.nickname }}</span>
          <i></i>
        </div>
        <div class="cmt-time">
          <span>{{ item.time|formatDate }}</span>
        </div>
      </div>
      <div class="cmt-content">
          <span class="text">{{item.content}}</span>
      </div>
    </div>
    <div class="cmt-right">
        <span>{{item.likedCount}}</span>
        <i><svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg></i>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: Object,
    num: {
      type: Number,
      default: 0,
    },
  },
  filters: {
    formatNum(val) {
      return val < 10 ? "0" + val : val;
    },
    formatDate(value) {
      let d = new Date(value);
      let m = d.getMonth() + 1;
      let day = d.getDate();
      return (
        (m < 10 ? "0" + m : m) + "月" + (day < 10 ? "0" + day : day) + "日"
      );
    },
  },
};
</script>
<style lang="less" scoped>
.comment {
  position: relative;
  width: 100%;
  display: flex;
  padding-top: 10px;
  border-bottom: 1px solid #F6F6F6;
  .cmt-left {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 5px;
    img {
      display: block;
      width: 100%;
    }
  }
  .cmt-middle {
    flex: 1;
    .cmt-user {
      .nikename {
        text-align: left;
        height: 20px;
        span {
          font-size: 14px;
          color: #666666;
        }
      }
      .cmt-time{
          text-align: left;
          span{
              font-size: 12px;
              color: #999999;
          }
      }
    }
    .cmt-content{
        margin-top: 5px;
        text-align: left;
        .text{
            font-size: 15px;
            color: #333333;
        }
    }
  }
  .cmt-right {
      position: absolute;
      right: 0px;
      top: 5px;
      width: 50px;
      height: 20px;
      span{
        padding-right: 5px;
        font-size: 12px;
        color: #999999;
      }
      i{
        display: inline-block;
        width: 14px;
        height: 14px;
      }
  }

}
</style>